<template>
  <div class="video-sharer">
    <c-title text="微信小店分享员邀请页"></c-title>
    <van-image width="100%" :src="top_image" />
    <div class="head">
      <p class="title">微信小店分享员</p>
      <template v-if="flag&&is_share_member==0">
        <div class="input-content">
          <span>微信号</span>
          <input v-model="value" type="text" placeholder="请输入微信号">
        </div>
        <p class="tips">(微信-我，个人昵称下方的微信号，不一定是手机号)</p>
        <div class="btn">
          <button @click="handle">加入分享员</button>
        </div>
      </template>
      <template v-else-if="!flag&&is_share_member==0">
        <img class="qrcode" :src="code" alt="">
        <p class="tips">长按识别二维码或者截图保存微信扫二维码成为分享员！</p>
      </template>
      <template v-else>
        <p class="tips" style="text-align: center;padding-bottom: 2.8125rem;padding-top: 0.75rem;">恭喜您已经成为了微信小店分享员，无需重复加入！</p>
      </template>



    </div>
    <div class="desc">
      <p class="desc-title">分享员说明</p>
      <div class="content" v-html="share_desc"></div>
    </div>

  </div>
</template>

<script>
import { Image as VanImage } from 'vant';
export default {
  components: { VanImage },
  data() {
    return {
      flag: true,
      value: "",
      top_image: "",
      share_desc: "",
      code: "",
      is_share_member:0,
    };
  },
  activated() {
    this.is_share_member = 0;
    this.flag = true;
    this.getData();
  },
  methods: {
    getData() {
      $http.get("plugin.video-shop.frontend.share-member.index", '', '').then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        let data = res.data;
        this.top_image = data.top_image;
        this.share_desc = data.share_desc
        this.is_share_member = data.is_share_member;
      })
    },
    handle() {
      $http.post("plugin.video-shop.frontend.share-member.shareCode", { username: this.value }, "").then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        this.flag = false;
        let data = res.data;
        this.code = data.code;
      })
    }
  }
};
</script>

<style scoped lang="scss">
.video-sharer {
  .input-content {
    display: flex;
    align-items: center;
    margin: 0.75rem;

    input {
      border: 1px solid #AAAAB3;
      border-radius: 0.25rem;
      margin-left: 0.5938rem;
      padding-left: 0.5rem;
      height: 1.625rem;
      width: 12.375rem;
    }
  }

  .qrcode {
    width: 7.5rem;
    height: 7.5rem;
    text-align: center;
  }

  .content {
    padding: 0 .75rem 0.75rem;
  }

  .desc {
    margin: 0.75rem;
    background: #fff;
    border-radius: 0.625rem;
    overflow: hidden;
  }

  .desc-title {
    text-align: center;
    margin: 0.625rem 0;
  }

  .btn {
    margin: 0 .75rem 0.75rem;

    button {
      border-radius: 0.625rem;
      width: 100%;
      height: 1.875rem;
      line-height: 1.875rem;
      border: none;
      color: #fff;
      background-color: var(--themeBaseColor);
    }
  }

  .tips {
    color: #F15353;
    font-size: 0.75rem;
    margin: 0.625rem 0.75rem;
    text-align: right;
  }

  .title {
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.75rem 0;
  }

  .head {
    margin: 0.75rem;
    background: #fff;
    border-radius: 0.625rem;
    overflow: hidden;
  }
}
</style>
